<template>
  <div>
    <div>
      <h2>1.v-bind的基本使用</h2>
      <img v-bind:src="imgUrl" alt="" style="width: 40px" />
      <a v-bind:href="link">百度一下</a>
    </div>
    <div>
      <h2>2.v-bind 提供一个语法糖</h2>
      <!-- 2.v-bind 提供一个语法糖 : -->
      <img :src="imgUrl" alt="" style="width: 40px" />
      <div>
        直接绑定 imgUrl 字符串给src,原生html语法
        <img src="https://v2.cn.vuejs.org/images/logo.svg" alt="" style="width: 40px" />
      </div>
    </div>
  </div>
</template>

<!-- <script>
export default {
  name: 'vbind',
  data() {
    return {
      imgUrl: 'https://v2.cn.vuejs.org/images/logo.svg',
      link: 'https://www.baidu.com'
    }
  }
}
</script> -->
<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'vbind'
})
const imgUrl = ref('https://v2.cn.vuejs.org/images/logo.svg')
const link = ref('https://www.baidu.com')
</script>

<style lang="scss" scoped></style>
